<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style type="text/css">
      #app {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      * {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 90vw;
        height: 550px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        padding: 20px;
      }

      .el-pagination {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="container">
        <el-row>
          <el-button type="primary" @click="dialogVisible = true"
            >添加</el-button
          >
        </el-row>

        <el-divider></el-divider>
        <el-form :inline="true" :model="formDomain" class="demo-form-inline">
          <el-form-item label="域名">
            <el-input
              v-model="formDomain.domain"
              placeholder="请输入域名"
              clearable
              @change="changeGroup"
            ></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select
              v-model="formDomain.groupId"
              placeholder="分组名称"
              clearable
              @change="changeGroup"
            >
              <el-option
                v-for="(item,index) in domainGroupList"
                :label="item.groupName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="编号" width="180">
          </el-table-column>
          <el-table-column prop="domain" label="域名" width="180">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="180">
          </el-table-column>
          <el-table-column prop="registrationDate" label="注册时间" width="180">
          </el-table-column>
          <el-table-column prop="expirationDate" label="过期时间" width="180">
          </el-table-column>
          <el-table-column prop="groupName" label="域名分组"> </el-table-column>
          <el-table-column label="操作">
            <el-button type="primary" size="medium" icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button type="danger" size="medium" icon="el-icon-delete"
              >删除</el-button
            >
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 3, 4, 5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>

        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose"
        >
          <el-form
            :model="domainForm"
            ref="domainForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="域名ID" prop="id">
              <el-input v-model="domainForm.id"></el-input>
            </el-form-item>
            <el-form-item label="域名" prop="id">
              <el-input v-model="domainForm.domain"></el-input>
            </el-form-item>
            <el-form-item label="分组名称" required>
              <el-select
                v-model="domainForm.groupId"
                placeholder="分组名称"
                clearable
              >
                <el-option
                  v-for="(item,index) in domainGroupList"
                  :label="item.groupName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="注册时间" required>
              <el-col :span="11">
                <el-form-item prop="registrationDate">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-model="domainForm.registrationDate"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item prop="registrationDate">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-model="domainForm.expirationDate"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-switch
                v-model="domainForm.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
              >
              </el-switch>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addDomain">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- axios -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {
          tableData: [],
          // 当前页码
          pageNum: 1,
          //每页条数
          pageSize: 2,
          // 总条数
          total: 0,
          dialogVisible: false,
          // 域名分组的集合
          domainGroupList: [],
          domainForm: {
            id: "",
            domain: "",
            status: 0,
            groupId: "",
            registrationDate: "",
            expirationDate: "",
          },
          formDomain: {
            domain: "",
            groupId: "",
          },
        };
      },
      // 浏览器加载就进入调用这个方法
      created() {
        this.getDomainList();
        this.getDomainGroupList();
      },
      methods: {
        getDomainList() {
          var that = this;
          axios
            .get("http://localhost:8080/domain/getDomainPage", {
              params: {
                pageNum: that.pageNum,
                pageSize: that.pageSize,
                domain: that.formDomain.domain,
                groupId: that.formDomain.groupId,
              },
            })
            .then(function (response) {
              that.tableData = response.data.records;
              that.total = response.data.total;
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        getDomainGroupList() {
          var that = this;
          axios
            .get("http://localhost:8080/domainGroup/getDomainGroupList")
            .then(function (response) {
              that.domainGroupList = response.data.data.domainGroupList;
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        changeGroup() {
          this.getDomainList();
        },
        addDomain() {
          var that = this;
          //dialogVisible = false;
          axios
            .post("http://localhost:8080/domain/addDomain", that.domainForm)
            .then(function (response) {
              that.dialogVisible = false;
              that.getDomainList();
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        handleSizeChange(val) {
          this.pageSize = val;
          this.getDomainList();
        },
        handleCurrentChange(val) {
          this.pageNum = val;
          this.getDomainList();
        },
        handleClose(done) {
          this.$confirm("确认关闭？")
            .then((_) => {
              done();
            })
            .catch((_) => {});
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert("submit!");
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        onSubmit() {
          this.getDomainList();
        },
      },
    });
  </script>
</html>
